<template>
  <el-config-provider :locale="locale">
    <router-view> </router-view>
  </el-config-provider>
</template>

<script setup lang="ts">
import cn from 'element-plus/lib/locale/lang/zh-cn'
import ar from 'element-plus/lib/locale/lang/ar'
import en from 'element-plus/lib/locale/lang/en'
import id from 'element-plus/lib/locale/lang/id'
import { watch,ref, onMounted } from "vue";
import {useUserStore} from "./store/index";

const userStore = useUserStore()
let locale = ref()
const isMobile = ref()

watch(() => userStore.lang, (lang, old) => {
  if(!lang)return
  if(lang === 'cn'){
    locale.value = cn
  } else if(lang === 'en') {
    locale.value = en
  } else if(lang === 'sa'){
    locale.value = ar
  } else if(lang === 'id'){
    locale.value = id
  }
},{immediate:true});

const checkMobile = ()=> {
      const userAgent = navigator.userAgent || navigator.vendor || window.opera;
      isMobile.value = /android|webos|iphone|ipad|ipod|blackberry|iemobile|opera mini/i.test(userAgent);
      localStorage.setItem('isMobile',isMobile.value)
} 

checkMobile()

onMounted(()=>{
  // 设置不同语言字体
  let element = document.querySelector("#app");
  let obj = JSON.parse(localStorage.getItem('user') as any)
  if(obj?.lang === 'sa'){
    element.style.fontFamily = 'GE_SS_Two_Medium'
  } else {
    element.style.fontFamily = 'Avenir, Helvetica, Arial, sans-serif'
  }
})


</script>

<style lang="scss">
@import './assets/global.scss';
#app {
  //font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #2c3e50;
  min-height: 100vh;
  // touch-action: none;
  // overflow-y: scroll; /* 允许垂直滚动 */
  // -webkit-overflow-scrolling: touch; /* 为iOS提供平滑滚动 */
}

.slide-fade-enter-from {
  transform: translateX(-30px);
  opacity: 0;
}
.slide-fade-enter-active {
  transition: all 0.5s ease;
}
.slide-fade-enter-to {
  transform: translateX(0);
  opacity: 1;
}

.slide-fade-leave-from {
  transform: translateX(0);
  opacity: 1;
}
.slide-fade-leave-active {
  transition: all 0.5s ease;
}
.slide-fade-leave-to {
  transform: translateX(30px);
  opacity: 0;
}
</style>
